<template>
  <div class="container">
    <div class="tips">
      选择相应的问题后再进行一个具体问题描述
    </div>
    <div class="select-content">
      <div class="select-item-box">
        <ul>
          <li v-if="true">个人视频</li>
          <li>
            <div class="item-desc">视频出现黑屏</div>
            <div class="item-is-select" @click="handleSelect($event)" data-id="tiger" data-flag="false"
                 data-index="0"></div>
          </li>
          <li>
            <div class="item-desc">视频闪退</div>
            <div class="item-is-select" @click="handleSelect($event)" data-id="mole" data-flag="false"
                 data-index="0"></div>
          </li>
          <li v-if="true">多方视频</li>
          <li>
            <div class="item-desc">视频11</div>
            <div class="item-is-select" @click="handleSelect($event)" data-id="kobe" data-flag="false"
                 data-index="1"></div>
          </li>
          <li>
            <div class="item-desc">视频22</div>
            <div class="item-is-select" @click="handleSelect($event)" data-id="carmo" data-flag="false"
                 data-index="1"></div>
          </li>
        </ul>
      </div>
    </div>
    <Submit :titleOptions="titleOptions" :selectData="dataArr"></Submit>
  </div>
</template>
<script>
  import Submit from '../common/submit.vue'
  import $ from 'jquery'
  import buttonOff from '../../assets/images/button_off.png'
  import buttonOn from '../../assets/images/button_on.png'

  export default {
    name: 'Abnormal-details',
    data() {
      return {
        buttonOff: 'url(' + buttonOff + ')',
        buttonOn: 'url(' + buttonOn + ')',
        category: this.$route.query.category,
        titleOptions: {
          inputTitle: '请补充详细问题',
          imagesTitle: '提供相关问题的截图或照片'
        },
        dataArr: [[], []]
      }
    },
    components: {
      Submit
    },
    watch: {},
    methods: {
      deleteData(targetArr, target) {
        targetArr.forEach((v, i) => {
          if (v == target) {
            return targetArr.splice(i, 1)
          }
        })
      },
      handleSelect(e) {
        var flag = $(e.target).attr('data-flag'),
          index = $(e.target).attr('data-index'),
          id = $(e.target).attr('data-id');

        if (flag == 'true') {
          $(e.target).attr('data-flag', 'false').css('backgroundImage', this.buttonOff)

          switch (index) {
            case '1':
              this.deleteData(this.dataArr[1], id)
              break;
            default:
              this.deleteData(this.dataArr[0], id)
          }
        } else {
          $(e.target).attr('data-flag', 'true').css('backgroundImage', this.buttonOn)

          switch (index) {
            case '1':
              this.dataArr[1].push(id)
              break;
            default:
              this.dataArr[0].push(id)
          }
        }
      }
    },
    created() {
    }
  }
</script>
<style scoped lang="scss">
  @import '../../assets/css/config';

  .container {
    .tips {
      @extend .title-style;
    }
    .select-content {
      .select-item-box {
        li {
          width: 100%;
          height: r(52);
          background-color: #fff;
          color: $grayColor;
          font-size: r(15);
          padding: 0 r(15);
          line-height: r(52);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item-is-select {
            width: r(20);
            height: r(20);
            background: url("../../assets/images/button_off.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
</style>
